<template>
  <div>
    <el-button type="primary" style="margin-left: 10px" @click="showadd">添加公式口诀</el-button>
    <el-table :data="objs.arrays" style="width: 100%">
      <el-table-column label="标题" width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.title }}</span>
        </template>
      </el-table-column>
      <el-table-column label="内容" width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.content }}</span>
        </template>
      </el-table-column>
       <el-table-column label="状态" width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.state=="ONLINE"?"上架":"下架" }}</span>
        </template>
      </el-table-column>
        <el-table-column label="时间" width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ renderTime(scope.row.gmttime) }}</span>
        </template>gmttime
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
            >编辑</el-button
          >
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <el-input placeholder="请输入标题" v-model="nowlist.title" style="padding: 10px">
        <template slot="prepend">标题</template>
      </el-input>
      <el-input
        placeholder="请输入内容"
        v-model="nowlist.content"
        style="padding: 10px"
      >
        <template slot="prepend">内容</template>
      </el-input>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="uporder"
          >确 定</el-button
        >
      </span>
      <el-switch
  style="display: block;margin-left:10px"
  v-model="value2"
  active-color="#13ce66"
  inactive-color="#ff4949"
  active-text="上架"
  inactive-text="下架">
</el-switch>
    </el-dialog>
  
    <el-dialog
  title="提示"
  :visible.sync="newdialog"
  width="30%"
  :before-close="handleclose">
    <el-input placeholder="请输入标题" v-model="title" style="padding: 10px">
        <template slot="prepend">标题</template>
      </el-input>
      <el-input
        placeholder="请输入内容"
        v-model="content"
        style="padding: 10px"
      >
        <template slot="prepend">内容</template>
      </el-input>
      <div style="margin-left:10px">状态:<el-switch
  v-model="value"
  active-color="#13ce66"
  inactive-color="#ff4949">
</el-switch>{{value==true?"上架":"下架"}}</div>
  <span slot="footer" class="dialog-footer">
    <el-button @click="newdialog = false">取 消</el-button>
    <el-button type="primary" @click="upsave">确 定</el-button>
  </span>
</el-dialog>


  <el-dialog
  title="提示"
  :visible.sync="delnews"
  width="30%"
  :before-close="handleClose">
  <span>确定删除该内容吗?</span>
  <span slot="footer" class="dialog-footer">
    <el-button @click="delnews = false">取 消</el-button>
    <el-button type="primary" @click="shanchu">确 定</el-button>
  </span>
</el-dialog>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      value: true,
      zhuangtai:'',
      title:'',
      content:'',
      nowlist: {}, //当前弹出窗内容
      objs: [], //
      currentPage: 1,
      dialogVisible: false,
      newdialog:false,
       value2: true,
       delnews:false,
    };
  },
  mounted() {
    this.getnews();
  },
  methods: {
    //删除新闻
    shanchu(){
      let ids = this.nowlist.id
       this.delkoujue(`/home/formula/delete?ids=${ids}`).then((resp) => {
          if (resp && resp.status == 200) {
            this.$message({
          message: '删除成功',
          type: 'success'
        });    
      this.delnews=false;
                this.getnews()
      }
        })
    },
    upsave(){
      let _this = this
        if(_this.value==true){
          _this.zhuangtai = "ONLINE"
      }else{
         _this.zhuangtai = "OFFLINE"
      }
      let data ={
          content:_this.content,
          title:_this.title,
          state:_this.zhuangtai,
      }
       _this.addkoujue("/home/formula/save",data).then((resp) => {
          if (resp && resp.status == 200) {
            _this.$message({
          message: '添加成功',
          type: 'success'
        });    
        this.newdialog=false
                _this.getnews()
      }
        })
    },
    //添加新的
    showadd(){
      this.newdialog=true
      
    },
      //提交更改信息
      uporder(){
        let _this = this
          _this.dialogVisible = false
          if(_this.value2==false){
              _this.nowlist.status ="OFFLINE"
              let data = {
                id:_this.nowlist.id,
                state:_this.nowlist.status,
                title:_this.nowlist.title,
                content:_this.nowlist.content,

              }
              _this.savegongshi("/home/formula/update",data).then((resp) => {
          if (resp && resp.status == 200) {
            this.$message({
          message: '修改成功',
          type: 'success'
        });    
                _this.getnews()
      }
        });
          }else{
            _this.nowlist.status ="ONLINE"
              let data = {
                id:_this.nowlist.id,
                state:_this.nowlist.status,
                title:_this.nowlist.title,
                content:_this.nowlist.content,

              }
              _this.savegongshi("/home/formula/update",data).then((resp) => {
          if (resp && resp.status == 200) {
            //console.log(resp)
              this.$message({
          message: '修改成功',
          type: 'success'
        }); 
        _this.getnews()
          }
        });
          }
      },
      //时间转换
      renderTime(date) {
        var dateee = new Date(date).toJSON();
        return new Date(+new Date(dateee) + 8 * 3600 * 1000).toISOString().replace(/T/g, ' ').replace(/\.[\d]{3}Z/, '') 
        },
    getnews() {
      var _this = this;
      _this.gongshi("/home/formula/list?pageNo=" + this.currentPage + "&pageSize=20").then((resp) => {
          this.tableLoading = false;
          if (resp && resp.status == 200) {
            var data = resp.data;
            _this.objs = data.data;
            //console.log(_this.objs);
          }
        });
    },
    //弹出窗
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    handleclose(done){
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    handleEdit(index, row) {
      //console.log(index, row);
      this.nowlist = row;
      this.dialogVisible = true;
    },
    handleDelete(index, row) {
      //console.log(index, row);
      this.nowlist =row;
      this.delnews=true;
    },
  },
};
</script>
